/**
 * pro-form-render -- 详情面板
 * @author SPY
 * @url 语雀:https://www.yuque.com/study365
 */
import React, { useState, useEffect, memo } from 'react';
import { Tabs, Form } from 'antd';
import { connect } from 'umi';
import FormSetting from './FormSetting';
import FormItemSetting from './FormItemSetting';

const { TabPane } = Tabs;

const FormDetailsPanel = ({ selectedKey }) => {
  const [activeKey, setActiveKey] = useState('form');

  const [form] = Form.useForm();

  useEffect(() => {
    if (selectedKey) {
      setActiveKey('form_item');
    } else {
      setActiveKey('form');
    }
  }, [selectedKey]);

  return (
    <div
      style={{ margin: '0 12px', height: 600, overflow: 'auto' }}
      className="clickAwayName"
    >
      <Tabs activeKey={activeKey} onChange={(key) => setActiveKey(key)}>
        <TabPane tab="表单配置" key="form">
          <FormSetting form={form} />
        </TabPane>
        {selectedKey && (
          <TabPane tab="组件配置" key="form_item">
            <FormItemSetting form={form} />
          </TabPane>
        )}
      </Tabs>
    </div>
  );
};
export default connect(({ proForm }) => ({
  ...proForm,
}))(memo(FormDetailsPanel));
